<template>
  <div>
    <div class="lr">
      <div class="l">
        <span>
          数字专辑榜&nbsp;&nbsp;
          <i class="iconfont icon-youjiantou"></i>
        </span>
      </div>
      <div class="r">
        <p class="red">日榜&nbsp;&nbsp;&nbsp;&nbsp;|</p>
        <p>周榜&nbsp;&nbsp;&nbsp;&nbsp;|</p>
        <p>总榜</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.lr {
  height: 1rem;
  display: flex;
  justify-content: space-around;
  margin-top: 0.2rem;
  border-bottom: 1px solid #ccc;
  background-color: rgb(247, 248, 250);
  line-height: 1rem;
}
.l {
  width: 50%;
  font-size: 0.3rem;
  margin-left: 0.25rem;
}
.icon-youjiantou {
  font-size: 0.3rem;
  vertical-align: middle;
}
.red {
  color: brown;
}

.r {
  width: 50%;
  display: flex;
  justify-content: space-evenly;
}
p {
  font-size: 0.3rem;
}
</style>